
<!DOCTYPE html>
<!--导入模板标签！！！-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
	
	<!-- 引入函数类库 -->
	<script src="/jquery-3.6.0.min.js"></script>
	<script>
		//函数式编程
		$(function(){
			//让整个页面加载完成后再次执行，以后所有的操作在函数内完成！！
			alert("JQuery调试！！！")
			})
			//在后端服务器发起请求/findAjaxUser，之后将返回值结果（）
			//在页面进行解析
			$.get("/findAjaxUser",function(result){
				console.log(result)
			/* 要求向后端服务器发起请求 /findAjaxUser请求之后，将返回值结果进行页面解析 */	
			$.get("/findAjaxUser",function(result){
				
				//1、将result是服务器返回的结果[{},{},{}....}]
				//2、将返回值结果进行循环遍历
				/*console.log(user)
				for(var i=0;i<result.length;i++){
					var user=result[i];
					console.log("AAAA")
				}*/
				
				//2、使用in的关键字，关键字in index代表遍历的下标
				/*for(index in result){
					var user = result[index]
					console.log(user)
					}*/
					
			   //3、使用of的关键字进行循环	
			        console.log("AAA")
				   for(user of result){
					   console.log(user)
					 }
					 
				for(user of result){
					//3、获取对象的属性值
					var id=user.id
					var name=user.name
					var age=user.age
					var sex=user.sex
					var tr="<tr align='center'><td>"+id+"</td><td>"
					+name+"</td><td>"+age+"</td><td>"+sex+"</td><tr>"
					console.log(tr)
					//4、选中id=userTable的元素
					//5、append（追加的内容）
					$("#userTable").append(tr)
				}	
				 
				//get请求 
				console.log("对象结构的语法")
				$.get("/findAjaxUser",{id:1,name:'tomcat'},function(result){
					     console.log("ajax请求成功！！！")
					})
				//post请求
				console.log("对象结构的语法")
				$.post("/findAjaxUser",{id:1,name:'tomcat'},function(result){
					     console.log("post请求执行成功！！！")
					})	
				//put请求成功 眼球返回值都是json字符串
				console.log("对象结构的语法")
				$.getJSON("/findAjaxUser",{id:1,name:'tomcat'},function(result){
					     console.log("getJSON请求数据！！！")
					})	
				//最为基本的ajax
				$.ajax({
					type:   "get",           //请求的类型
					url: 'findAjaxUser',     //请求的路径
					data: {id:1,name:'tomcat猫'},  //请求的参数
					success:function(result){
						console.log("ajax请求成功！！！")
						},
						error:function(result){
						console.log("ajax请求失败！！！")	
						}
					})
					
				})	
			})
				
			
	</script>
	
</head>
<body>
	<!-- 修改数据模块 -->
	<h1>修改数据</h1>
	<div>
	  <p>编号：</p>	
	  <p>姓名：</p>	
	  <p>年龄：</p>		 
	   <button>更新</button>
	</div>
	
   <!--准备一个表格-->
   <table id="userTable" border="1px" align="center" width="800px">
      <tr align="center">
          <td colspan="4"><h3>用户列表数据</h3></td>
          
      </tr>
       <tr align="center">
           <td>ID</td>
           <td>名称</td>
           <td>年龄</td>
           <td>性别</td>
		   <td>
			   <button>修改</button>
			   <button>删除</button>
		   </td>
       </tr>

       <!--each遍历数据库数据，将数据展示在页面上-->
       <tr align="center" th:each="user:${userList}">
           <td th:text="${user.id}"></td>
           <td th:text="${user.name}"></td>
           <td th:text="${user.age}"></td>
           <td th:text="${user.sex}"></td>

       </tr>
   </table>
</body>
</html>